<!doctype html>
<head>
  <title>Todo Tablet</title>
  <!-- Every version of your webapp should include a list of all
  versions. -->
  <link rel="alternate" href="desktop.html" id="desktop"
  media="only screen and (touch-enabled: 0)">
  <link rel="alternate" href="phone.html" id="phone"
  media="only screen and (max-device-width: 640px)">
  <link rel="alternate" href="tablet.html" id="tablet"
  media="only screen and (min-device-width: 641px)">

  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  <script src="../build/device.js"></script>
</head>

<body>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Todos (Tablet)</a>
        <ul class="nav pull-right">
          <li class="divider-vertical"></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tablet <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="?device=phone">Phone</a></li>
            <li><a href="?device=desktop">Desktop</a></li>
          </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tabbable tabs-left">
    <a class="btn pull-right" href="#"><i class="icon-plus"></i></a>
    <ul class="nav nav-tabs" style="width: 20%;">
      <a class="btn pull-right" style="margin-right: 5px" href="#"><i class="icon-cog"></i></a>
      <h3 style="margin-left: 10px;">Lists</h3>
      <br/>
      <li class="active"><a href="#1" data-toggle="tab">
        <span class="title">Inbox</span>
        <span class="pull-right">1</span>
      </a></li>
      <li><a href="#1" data-toggle="tab">
        <span class="title">Completed</span>
        <span class="pull-right">2</span>
      </a></li>
      <li><a href="#1" data-toggle="tab">
        <span class="title">Total</span>
        <span class="pull-right">3</span>
      </a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="1">
        <h3 style="margin-left: 10px; margin-bottom: 20px;">Inbox</h3>
        <ul class="noformat">
          <label class="checkbox">
            <input type="checkbox" id="optionsCheckbox" value="option1">
            Buy milk
          </label>
          <label class="checkbox">
            <input type="checkbox" id="optionsCheckbox" value="option1">
            Eat lunch
          </label>
        </ul>
      </div>
    </div>
</div>
  <script src="bootstrap/js/jquery.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
</body>
